<template>
    <div class="optical-parameter file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="content">
                    <div class="optical">
                        <div class="title">光学参数</div>
                        <div class="form">
                            <div class="form-item column">
                                <div class="label">信号功率:</div>
                                <div class="box">
                                    <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.signalPower[0]"/>
                                    <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.signalPower[1]"/>
                                    <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.signalPower[2]"/>
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="label">内部散射损耗:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.loss"/>
                            </div>
                            <div class="form-item">
                                <div class="label">峰值波长(nm):</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.peakWaveLength"/>
                            </div>
                            <div class="form-item">
                                <div class="label">参考波长(nm):</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.referWaveLength"/>
                            </div>
                            <div class="form-item">
                                <div class="label">折射率:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.refractiveIndex"/>
                            </div>
                            <div class="form-item">
                                <div class="label">ASE波长范围:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.aseWaveLengthRange"/>
                            </div>
                        </div>
                    </div>
                    <div class="model">
                        <div class="title">光学模式参数(以TE模式为例)</div>
                        <div class="form">
                            <div class="form-item">
                                <div class="label">有效折射率:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.effectiveRefractiveIndex"/>
                            </div>
                            <div class="form-item">
                                <div class="label">群折射率:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.groupRefractiveIndex"/>
                            </div>
                            <div class="form-item">
                                <div class="label">功率限制因子:</div>
                                <input class="pui-input" type="text" placeholder="请输入" v-model="componentRef.optical.powerLimitingFactor"/>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="submitHandle" type="primary">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'MaterialCustom'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '系统环境变量-光学参数'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const emit = defineEmits({
    onClose: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    optical: {
        signalPower: [15e8, 2.5e-17, 9.4e-41],
        loss: 2.5e3,
        peakWaveLength: 1550,
        referWaveLength: 1550,
        refractiveIndex: 3.2,
        aseWaveLengthRange: 0.2,
        effectiveRefractiveIndex: 3.19296541253737,
        groupRefractiveIndex: 3.44949559033477,
        powerLimitingFactor: 0.3,
    }
}) as any
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const submitHandle = () => {

}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>